<!-- 合同档案详情 -->

<template>
  <div class="contract-detail">
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
    </pageHeader>
    <div class="contract-detail-header">
      <h2>
        <span>
          {{ contractDetail.name }}
        </span>
        <span
          :style="{
            marginLeft: '10px',
          }"
        >
          {{ dayjs(contractDetail.created_at).format('YYYY-MM-DD hh:mm:ss') }}
        </span>

        <span
          :style="{
            color:
              contractDetail.executionState === 1
                ? '#c9cdd4'
                : contractDetail.executionState === 2
                ? '#156dff'
                : '#31c273',
            marginLeft: '10px',
          }"
          >{{
            contractDetail.executionState === 1
              ? '待执行'
              : contractDetail.executionState === 2
              ? '执行中'
              : '已完成'
          }}</span
        >
      </h2>
      <div>
        <table border="1" cellspacing="0">
          <tbody>
            <tr>
              <td>客户名称</td>
              <td> {{ clientDetail.name }} </td>
              <td>合同金额</td>
              <td
                >{{ `${contractDetail.totalPrice}${contractDetail.totalUnit}` }}
              </td>
            </tr>
            <tr>
              <td>业务员</td>
              <td> {{ clientDetail.salesName }} </td>
              <td>创建时间</td>
              <td>
                {{
                  dayjs(contractDetail.created_at).format('YYYY-MM-DD hh:mm:ss')
                }}
              </td>
            </tr>
            <tr>
              <td>合同完成进度</td>
              <td colspan="3"> </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="contract-detail-tabs">
      <a-tabs v-model:active-key="tabsActive" default-active-key="1" lazy-load>
        <a-tab-pane v-for="item in tabs" :key="item.key" :title="item.title">
          <baseInfo v-if="item.key === '1'"></baseInfo>
          <orderInfo v-else-if="item.key === '2'"></orderInfo>
        </a-tab-pane>
      </a-tabs>
    </div>
    <!-- <stateStapsModal
      v-model:visible="isChangeState"
      @changeStepsEmit="changeStepsEmit"
      :state="contractDetailList.state"
      :state-list="stateList"
    ></stateStapsModal> -->
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, watchEffect, watch, onMounted } from 'vue';
  import { useRoute } from 'vue-router';
  import dayjs from 'dayjs';
  import { GetContractDetail } from '@/api/contract-management/contract-list';
  import { GetClientDetail } from '@/api/order-management/client-management/client-list/index';
  import baseInfo from './components/base-info/index.vue';
  import orderInfo from './components/order-info/index.vue';

  const route = useRoute();

  const id = Number(route.query.id); // 合同id

  const title: string = '合同档案详情';

  const breadCrumb: string[] = ['合同管理', '合同列表', '合同档案详情'];

  let contractDetail = ref<any>({}); // 储存合同详情

  let clientDetail = ref({
    name: '', // 客户名称
    salesName: '', // 业务员
  }); // 储存客户信息

  const getcontractDetailData = async () => {
    try {
      // 获取合同详情
      const res: any = await GetContractDetail({
        id,
      });
      res.extend = JSON.parse(res.extend);
      contractDetail.value = res;

      // 获取客户名称
      const res2 = await GetClientDetail({
        id: contractDetail.value.clientCompanyId,
      });
      clientDetail.value.name = res2.name;
      clientDetail.value.salesName = res2.salesName;
    } catch (err: unknown) {
      console.log(err);
    }
  };
  getcontractDetailData();

  let tabsActive = ref('1'); // 储存当前活跃的tabs， 默认为第一个tabs
  const tabs = reactive([
    {
      key: '1',
      title: '基本信息',
    },
    {
      key: '2',
      title: '订单信息',
    },
    {
      key: '3',
      title: '合同变更记录',
    },
    {
      key: '4',
      title: '合同附件',
    },
  ]);
</script>

<style scoped lang="less">
  .contract-detail {
    &-header {
      padding: 10px 30px;

      table {
        width: 100%;
        border-color: #f9f9f9;
        tr {
          height: 58px;
          text-align: center;
        }
        td:nth-child(odd) {
          background-color: #f5f7fa;
          width: 200px;
        }
        td:nth-child(even) {
          width: 389px;
        }
      }
    }
  }
</style>
